<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item
        label="账号名"
        prop="username"
        :disabled="form.uid ? true : false"
      >
        <el-input v-model.trim="form.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" :prop="form.id ? '' : 'password'">
        <el-input v-model.trim="form.password" type="password"></el-input>
      </el-form-item>

      <el-form-item label="名称" prop="nickname">
        <el-input v-model.trim="form.nickname"></el-input>
      </el-form-item>

      <el-form-item label="分组" prop="groupid" v-if="!form.id">
        <el-input v-model.trim="form.groupname" readonly></el-input>
      </el-form-item>

      <el-form-item label="手续费模板" prop="feemid">
        <el-select v-model="form.feemid" placeholder="请选择">
          <el-option
            v-for="item in feeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="保证金模板" prop="marginmid">
        <el-select v-model="form.marginmid" placeholder="请选择">
          <el-option
            v-for="item in marginList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="风控模板" prop="wcmid">
        <el-select v-model="form.wcmid" placeholder="请选择">
          <el-option
            v-for="item in fkList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="汇率模板" prop="ratemid">
        <el-select v-model="form.ratemid" placeholder="请选择">
          <el-option
            v-for="item in hlList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="止盈止损模板" prop="zyzxmid">
        <el-select v-model="form.zyzxmid" placeholder="请选择">
          <el-option
            v-for="item in zyzsList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    doAdd,
    adduser,
    getMarginlist,
    getFeelist,
    getRatelist,
    getWclist,
    edituser,
  } from '@/api/userManagement'
  import tree from 'vue-giant-tree'
  import { getAuthList } from '@/api/ad'
  export default {
    name: 'UserManagementEdit',
    components: {
      tree,
    },
    data() {
      return {
        ztreeObj: null,
        fkList: [],
        hlList: [],
        zyzsList: [],
        marginList: [],
        feeList: [],
        form: {
          account: '',
          username: '',
          nickname: '',
          password: '',
          monpwd: '',
          detail: '',
          groupname: '',
          groupid: '',
          feemid: '',
          marginmid: '',
          wcmid: '',
          zyzxmid: 1,
          ratemid: '',
        },
        rules: {
          username: [
            { required: true, trigger: 'blur', message: '请输入账号' },
          ],
          password: [
            { required: true, trigger: 'blur', message: '请输入名称' },
          ],
          nickname: [
            { required: true, trigger: 'blur', message: '请输入名称' },
          ],
          feemid: [
            { required: true, trigger: 'change', message: '请输入手续费模板' },
          ],
          marginmid: [
            { required: true, trigger: 'change', message: '请输入保证金模板' },
          ],
          wcmid: [
            { required: true, trigger: 'change', message: '请输入风控模版' },
          ],
          ratemid: [
            { required: true, trigger: 'change', message: '请输入汇率模版' },
          ],
          zyzxmid: [
            { required: true, trigger: 'change', message: '请输入止盈模版' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    methods: {
      async getAllList() {
        const arr = await Promise.all([
          getMarginlist({}),
          getFeelist({}),
          getRatelist({}),
          getWclist({}),
        ])
        this.marginList = arr[0].data.map((item) => {
          let da = {}
          da.label = item.name
          da.value = item.id
          return da
        })
        this.feeList = arr[1].data.map((item) => {
          let da = {}
          da.label = item.name
          da.value = item.id
          return da
        })
        this.hlList = arr[2].data.map((item) => {
          let da = {}
          da.label = item.name
          da.value = item.id
          return da
        })
        this.fkList = arr[3].data.map((item) => {
          let da = {}
          da.label = item.name
          da.value = item.id
          return da
        })
      },
      // 获取手续费模板
      // 获取保证金模板
      // 获取风控模板
      // 获取汇率模板
      handleCreated(ztreeObj) {
        this.ztreeObj = ztreeObj
      },
      showEdit(row) {
        if (!row.id) {
          this.title = '添加'
        } else {
          this.form.uid = row.uid
          this.title = '编辑'
        }
        this.getAllList()
        this.form = Object.assign(this.form, row)
        this.form.password = ''
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.form.id) {
              this.form.uid = this.form.id
              const res = await edituser(this.form)
              this.$baseMessage('操作成功!', 'success')
            } else {
              const res = await adduser(this.form)
              this.$baseMessage('操作成功!', 'success')
            }

            this.close()
            this.$emit('fetch-data')
          } else {
            return false
          }
        })
      },
    },
  }
</script>
